import React, { useEffect, useRef, useState } from 'react'
import {
    Form,
    Input,
    Button,
} from 'antd-mobile'
function Index() {
    const timer = useRef(null)
    // 定义一个变量用来表示初始时间
    const [initTime, setInitTime] = useState(60)
    const [codeText, setCodeText] = useState('获取验证码')
    // 定义一个变量用来表示状态
    const [isRuing, setIsRuing] = useState(false)
    
    const handleCode = () => {
        if (!isRuing) {
            setIsRuing(true)
            
        }
    }

    useEffect(() => {
        return () => {
            if (timer.current) {
                clearInterval(timer.current)
            }
        }
    })
    return (
        <div>
            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        登录
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item
                    name='telCode'
                    label='验证码'
                    rules={[{ required: true, message: '验证码不能为空' }]}
                    extra={
                        <Button
                            size='small'
                            // 判断是否禁用
                            disabled={isRuing ? true : false}
                            onClick={() => handleCode()}
                        >
                            {codeText}
                        </Button>
                    }
                >
                    <Input placeholder='请输入验证码' />
                </Form.Item>
            </Form>
        </div>
    )
}

export default Index
